<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="referrer" content="no-referrer" />
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>源辰租房</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/login.js"></script>
    <script src="js/tenant.js"></script>
    <style>
        .pagination {
            text-align: center;
        }
        .card{
            display: flex;
            width: 100%;
            border: 8px solid #e9f9f4;
            border-radius: 2px;
            padding: 24px;
            margin-bottom: 20px;
            position: relative;
            zoom: 1;
        }
        .photo{
            width: 80px;
            height: 100px;
            -o-object-fit: cover;
            object-fit: cover;
        }
        .bottom div{
            margin-bottom: 6px;
        }
        .fontColor{
            color: #979b9e;
            margin-right: 15px;
        }
    </style>
</head>
<body class="user-select">
<div id="app">
    <mymain @logined="onlogin">
        <div style="color: #979b9e;margin-bottom: 18px;font-size: 12px">{{user.userName}}的店铺</div>
        <div class="card">
            <img class="photo" :src="user.image">
            <div style="width: 800px ; margin-left: 20px ">
                <div><h2 >{{user.userName}}</h2></div>
                <div style="color: #979b9e;margin-top: 10px;margin-bottom: 10px">信誉度(满分100): <span style="color: black;">{{user.reputation}}</span></div>
               <div style="display: flex ; justify-content: space-between;width: 100%">
                   <div style="display: block;" class="bottom">
                       <div><span class="fontColor">地址:</span> {{user.address}}</div>
                       <div><span class="fontColor">电话:</span> {{user.phone}}</div>
                   </div>
                   <div style="display: block;" class="bottom">
                       <div><span class="fontColor">营业执照编号:</span> {{user.idNumber}}</div>
                       <div><span class="fontColor">邮箱:</span> {{user.mail}}</div>
                   </div>
               </div>
            </div>
        </div>
        <article class="excerpt excerpt-1" style="height: 180px;" v-for="(h,index) in houseList">
            <a class="focus" @click="goHouseDetails(h.id,h.masterId)" title="">
                <img class="thumb" :src="h.image" alt="">
            </a>
            <header><a class="cat" href="program">{{h.type}}<i></i></a>
                <h2><a @click="goHouseDetails(h.id,h.masterId)" title="" style="font-weight: 400; font-size: 20px">{{h.introduce}}</a></h2>
            </header>
            <div style="display: flex;">
                <p class="meta">
                    <span class="time"> {{h.scale}}</span>
                    <span class="views"> {{h.area}}m²</span><br><br>
                    <span class="views"> {{h.address}}</span>
                    <span class="views"> 高桥一号小区</span><br><br>
                    <span class="views"> 来自经纪人</span>
                </p>
                <p class="meta" style="margin: auto;font-size: 28px;color: red;font-weight: 400;float: right;">
                    <span style="margin-left: 200px;"> {{h.price}}元/月</span>
                </p>
                <el-row v-if="state==1">
                    <el-button type="success" style="margin-bottom: 20px" round @click="change(h.id)">修改</el-button><br/>
                    <el-button type="danger" round @click="open(h.id)">删除</el-button>
                </el-row>
            </div>
        </article>
        <div class="block">
            <el-pagination class="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page"
                    :page-sizes="[2,5,10]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </mymain>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data:{
            houseList:[],
            user:{},
            page: 1,
            pageSize: 2,
            userId:"",
            total:"",
            state:0
        },
        created(){
            this.onlogin();
        },
        methods:{
            onlogin(user){
                console.info(user);
                setTimeout(()=>{
                    this.userId=localStorage.getItem("userId");
                    if (this.userId==user.id){
                        this.state=1;
                    }
                    this.pageChange();
                    this.query();
                },500)
            },
            query(){
                axios.get("/TN-USER/user/info?userId="+this.userId).then(res=>{
                    if (res.data.code){
                        this.user=res.data.data;
                    }
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.pageChange();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page=val;
                this.pageChange();
            },
            pageChange(){
                axios.get("house/master?userId="+this.userId+"&page="+this.page+"&pageSize="+this.pageSize)
                    .then(res=>{
                        if (res.data.code){
                            var data= res.data.data;
                            this.houseList=data.records;
                            this.total=data.total;
                        }else {
                            this.$message(res.data.msg);
                        }
                    })
            },
            goHouseDetails(houseId, masterId){
                localStorage.setItem("houseId",houseId);
                localStorage.setItem("masterId",masterId);
                location.href = "houseDetails.html";
            },
            open(id) {
                this.$confirm('此操作将永久删除该房源, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/house/delete?id="+id).then(res=>{
                        if (res.data.code){
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                        }else {
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            change(id){
                localStorage.setItem("changeId",id);
                location.href="/changeHouse.html";
            }
        }
    })
</script>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>